﻿<template>
    <div class="card-fill layout-padding">
        <el-card shadow="hover" class="layout-padding-auto">
            <div>
                <el-form ref="formRefProduct" :model="stateProduct.vmModel" label-width="100px">
                    <el-row>
                        <el-col :xs="24" :lg="24" class="mb20">
                            <el-form-item ref="Entity_Name_FormItem" prop="Entity.Name"
                                :label="$t('message.autotrans._Model_Product_Name')"
                                :rules="[{ required: true, message: $t('message._system.common.vm.input', { input: $t('message.autotrans._Model_Product_Name') }), trigger: 'blur' }]">
                                <el-input v-model="stateProduct.vmModel.Entity.Name" clearable></el-input>
                            </el-form-item>

                        </el-col>
                        <el-col :xs="24" :lg="24" class="mb20">
                            <el-form-item ref="Entity_Code_FormItem" prop="Entity.Code"
                                :label="$t('message.autotrans._Model_Product_Code')"
                                :rules="[{ required: true, message: $t('message._system.common.vm.input', { input: $t('message.autotrans._Model_Product_Code') }), trigger: 'blur' }]">
                                <el-input v-model="stateProduct.vmModel.Entity.Code" clearable></el-input>
                            </el-form-item>

                        </el-col>

                       
				<el-col :xs="24" :lg="24" class="mb20">
					<el-form-item ref="Entity_MaterialId_FormItem" prop="Entity.MaterialId"
												:rules="[{required: true, message: $t('message._system.common.vm.input',{input:$t('message.autotrans._Model_Product_Material')}), trigger: 'blur' }]"
												:label="$t('message.autotrans._Model_Product_Material')">
						<el-select v-model="stateProduct.vmModel.Entity.MaterialId" clearable>
							<el-option v-for="item in stateProduct.AllMaterials" :key="item.Value"  :value="Number(item.Value)"  :label="item.Text"></el-option>
						</el-select>
					</el-form-item>

				</el-col>

                       

                        <el-col :xs="24" :lg="24" class="mb20">
                            <el-form-item ref="Entity_Active_FormItem" prop="Entity.Active"
                                :label="$t('message.autotrans._Model_Product_Active')"
                                :rules="[{ required: true, message: $t('message._system.common.vm.input', { input: $t('message.autotrans._Model_Product_Active') }), trigger: 'blur' }]">
                                <el-switch v-model="stateProduct.vmModel.Entity.Active" clearable></el-switch>
                            </el-form-item>

                        </el-col>
                    </el-row>

                    <WtmTable ref="tableRefProductBomProductList" v-bind="tableDataProductBomProductList"
                        v-model="stateProduct.vmModel.Entity.ProductBom_Product"></WtmTable>
                    <div style="text-align:right;">
                        <WtmButton @click="onSubmitProduct" type="primary"
                            :button-text="$t('message.autotrans.SysSubmit')" style="margin-top:15px;" />

                        <WtmButton @click="onCloseProduct" type="primary"
                            :button-text="$t('message.autotrans.SysClose')" style="margin-top:15px;" />

                    </div>

                </el-form>

            </div>

        </el-card>
    </div>
</template>


<script setup lang="ts" name="message.autotrans._PageProductManagementProductCreate;false">
import { ElMessageBox, ElMessage, ElLoading } from 'element-plus';
import { defineAsyncComponent, reactive, ref, getCurrentInstance, onMounted, nextTick, inject } from 'vue';
import { productApi } from '/@/api/productmanagement/product';
import other from '/@/utils/other';
import { useMqttStore } from '/@/stores/mqttStore';
import fileApi from '/@/api/file';
import { useRouter } from "vue-router";
import { MQTTClient } from '/@/utils/mqttplugin';
import { Local, Session } from '/@/utils/storage';
const ci = getCurrentInstance() as any;


// 定义变量内容
const tableRefProductBomProductList = ref();
const tableDataProductBomProductList = ref({
    // 列表数据（必传）
    data: [],
    // 表头内容（必传，注意格式）
    header: [
        { title: ci.proxy.$t('message.autotrans.Page物料'), key: 'MaterialId', type: 'combobox', comboData: '/api/ProductManagement/ProductBom/GetMaterialDocs', isCheck: true },
        // {title:ci.proxy.$t('message.autotrans.Page物料名称'),key: 'MaterialName',type: 'textbox',isCheck: true},
        { title: ci.proxy.$t('message.autotrans.Page需求数量'), key: 'Qty', type: 'number', colWidth: 180, isCheck: true },
        { title: ci.proxy.$t('message.autotrans.Page所属工序'), key: 'OpCode', type: 'textbox', isCheck: true },
        { title: ci.proxy.$t('message.autotrans.Page单位'), key: 'Unit', type: 'textbox', isCheck: true },

    ],
    // 配置项（必传）
    config: {
        total: 0, // 列表总数
        loading: false, // loading 加载
        isSerialNo: true, // 是否显示表格序号
        isSelection: true, // 是否显示表格多选
        isOperate: true, // 是否显示表格操作栏
        isSub: true,
        isDisabled: false
    }
});

//产品选择改变时
const onProductChange = (prodId: any) => {
    if (prodId) {
        other.getSelectList(`/api/ProductManagement/Product/GetProductProcessItems?id=${prodId}`, [], false).then(x => { stateProduct.AllOps = x });
    }
    else {
        stateProduct.AllOps = [];
    }
}



// 定义变量内容
const formRefProduct = ref();
const stateProduct = reactive({
    vmModel: {
        Entity: {          
            Name: '',
            Code: '',               
            MaterialId : undefined,
            LineId :undefined,
            Active: true,
            ProductBom_Product: [] as any[],
        },

    },
    AllOps: [] as any[],
    AllMaterials: [] as any[],
    AllProducts: [] as any[],
});

// 取消
const onCloseProduct = () => {
    closeDialog();
};

// 提交
const onSubmitProduct = () => {
    const loadingInstance = ElLoading.service({
        lock: true,
        text: '正在提交中，请等待。。。',
        background: 'rgba(0, 0, 0, 0.7)',
    });
    formRefProduct.value?.validate((valid: boolean, fields: any) => {
        if (valid) {
            productApi().add(stateProduct.vmModel).then(() => {
                ElMessage.success(ci.proxy.$t('message._system.common.vm.submittip'));
                emit('refresh');
                closeDialog();
            }).catch((error) => {
                other.setFormError(ci, error);
            }).finally(() => {
                loadingInstance.close();
            })
        }
        else {
            loadingInstance.close();
        }
    })
};

// 页面加载时
onMounted(() => {
    
    other.getSelectList('/api/ProductManagement/Product/GetMaterialDocs', [], false).then(x => { stateProduct.AllMaterials = x });
    other.getSelectList('/api/ProductManagement/ProductBom/GetProducts', [], false).then(x => { stateProduct.AllProducts = x });
});

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh', 'closeDialog']);
// 关闭弹窗
const closeDialog = () => {
    emit('closeDialog');
};
// 暴露变量
defineExpose({

});
</script>

<style scoped lang="scss"></style>
